<script setup lang="ts">
import type { ConsultOrderItem, EvaluateDoc, EvaluateInfo } from "@/types/chitchat";
import { computed, inject, reactive, Ref } from "vue";
import { showFailToast, showSuccessToast } from "vant";
import { evaluateAPI } from "@/api/consultApi.ts";

defineProps<{
    evaluateDoc?: EvaluateDoc
}>();

/*评价参数*/
const evaluateInfo = reactive<EvaluateInfo>({
    docId: "",
    orderId: "",
    score: 0,
    content: "",
    anonymousFlag: 1,
});

const anonymousFlag = computed({
    get() {
        return evaluateInfo.anonymousFlag === 1;
    },
    set(value) {
        evaluateInfo.anonymousFlag = value ? 1 : 0;
    },
});

const orderDetail = inject<Ref<ConsultOrderItem>>("orderDetail");

const completeEva = inject<(score: number) => void>("completeEva");

/*禁用评价按钮*/
const disabled = computed(() => !evaluateInfo.score || !evaluateInfo.content);

const handleSubmit = async () => {
    try {
        evaluateInfo.docId = orderDetail?.value.docInfo.id as string;
        evaluateInfo.orderId = orderDetail?.value.id as string;
        await evaluateAPI(evaluateInfo);
        showSuccessToast("评价成功");
        completeEva(evaluateInfo.score);
    } catch (error: any) {
        showFailToast(error.message);
    }
};

</script>

<template>
    <div class="evaluate-card" v-if="evaluateDoc">
        <p class="title">医生服务评价</p>
        <p class="desc">我们会更加努力提升服务质量</p>
        <van-rate :modelValue="evaluateDoc.score" size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" />
    </div>
    <div class="evaluate-card" v-else>
        <p class="title">感谢您的评价</p>
        <p class="desc">本次在线问诊服务您还满意吗？</p>
        <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" v-model="evaluateInfo.score" />
        <van-field type="textarea" maxlength="150" show-word-limit rows="3" placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题" v-model="evaluateInfo.content"></van-field>
        <div class="footer">
            <van-checkbox v-model="anonymousFlag">匿名评价</van-checkbox>
            <van-button type="primary" size="small" round :disabled="disabled" @click="handleSubmit"> 提交评价</van-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.evaluate-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;

    .title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .desc {
        font-size: 12px;
        margin-bottom: 15px;
        color: var(--cp-tip);
    }

    .van-field {
        background-color: var(--cp-bg);
        margin: 15px 0;
        border-radius: 8px;
    }

    .footer {

        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        :deep {
            .van-checkbox {
                .van-icon {
                    font-size: 12px;
                }

                &__label {
                    font-size: 12px;
                    color: var(--cp-tip);
                }

                height: 16px;
            }

            .van-button {
                padding: 0 16px;

                &.disabled {
                    opacity: 1;
                    background: #fafafa;
                    color: #d9dbde;
                    border: #fafafa;
                }
            }
        }
    }
}
</style>
